<template>
  <div>
    <div class="con">
      <div class="title">
        <p class="con-title">
          <span>
            <img src="@/assets/img/control/content/Group769.png" />
          </span>
          <span>我的消息</span>
        </p>
      </div>
      <div class="btn-box">
        <div
          v-for="(i, k) in typeList"
          :key="k"
          class="btn-item"
          :class="{ 'btn-active': i.value == queryParams.noticeType }"
          @click="checkType(i.value)"
        >
          {{ i.label }}
        </div>
        <div class="btn-item btn-active right" @click="cleanAll">全部已读</div>
      </div>
      <el-table
        v-loading="loading"
        :data="dataList"
        border
        header-cell-class-name="title-style"
        @row-click="handleView"
      >
        <el-table-column prop="noticeTitle" label="通知标题" align="center" />
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <i
              class="dot"
              :class="scope.row.status == '0' ? 'dot-error' : 'dot-success'"
            ></i>
            <span :class="scope.row.status == '0' ? 'error' : 'success'">
              {{ scope.row.status == "0" ? "未读" : "已读" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <template #default="scope">
            {{ getTypeLabel(scope.row.noticeType) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="发布时间" align="center" />
      </el-table>
      <div class="page-footer">
        <el-pagination
          :total="total"
          v-model:current-page="queryParams.params.pageNum"
          v-model:page-size="queryParams.params.pageSize"
          layout="total, prev, pager, next"
          small
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { messageList, messageRead } from "@/api/control/order";
import useSystemStore from "@/store/main/system/system";
const systemStore = useSystemStore();

import { useRouter } from "vue-router";
const router = useRouter();

const loading = ref(false); // 遮罩层
const dataList = ref([]); // 数据列表
const total = ref(0); // 总条数
const queryParams = ref({
  noticeType: null,
  params: {
    pageNum: 1,
    pageSize: 10,
  },
});
const typeList = ref([
  { label: "全部消息", value: null },
  { label: "站内消息", value: "1" },
  { label: "系统消息", value: "2" },
  { label: "其它消息", value: "3" },
]);

onMounted(() => {
  getList();
});

// 获取消息列表
const getList = () => {
  loading.value = true;
  messageList(queryParams.value)
    .then((res: any) => {
      dataList.value = res.rows;
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 选择消息类型
const checkType = (val) => {
  queryParams.value.noticeType = val;
  queryParams.value.params.pageNum = 1;
  getList();
};

// 获取类型中文名称
const getTypeLabel = (val: any) => {
  let row = typeList.value.find((i: any) => i.value == val);
  return row ? row.label : "";
};

// 一键已读
const cleanAll = () => {
  messageRead({ isAll: 2 }).then((res: any) => {
    ElMessage.success(res.msg);
    systemStore.orderUnread();
    checkType(null);
  });
};

// 查看详情
const handleView = (row) => {
  router.push({
    path: "/client/myMessage/messageDetails",
    query: {
      noticeId: row.noticeId,
    },
  });
};
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  height: auto;
  .con-title {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      display: flex;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
      }
    }
    span:nth-child(2) {
      display: flex;
      align-items: center;
      margin-left: 10px;
      font-size: 16px;
    }
  }
}
.btn-box {
  margin: 20px 0;
  position: relative;
  .btn-item {
    display: inline-block;
    min-width: 104px;
    height: 36px;
    line-height: 36px;
    background: #f6f6f6;
    text-align: center;
    color: #909090;
    border: none;
    margin-right: 20px;
    &:hover {
      cursor: pointer;
    }
  }
  .btn-active {
    background: #f6faff;
    color: #157dfa;
  }
  .right {
    float: right;
  }
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.dot-success {
  background-color: #67c23a;
}
.dot-error {
  background-color: #f56c6c;
}
.success {
  color: #67c23a;
}
.error {
  color: #f56c6c;
}
.page-footer {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>

